<template>
	<view class="addsite-container">
		<!-- navbar -->
		<!-- <view class="header">
			<image src="/static/images/leftarrow.png" @click="goBack" />
			<view class="title">{{cartStore.statu ? '添加地址' : '编辑地址'}}</view>
		</view> -->

		<!-- 用户信息表 -->
		<view class="userinfo">
			<view class="user name">
				<view class="text">姓名</view>
				<input type="text" v-model="cartStore.newSite.name" />
			</view>
			<view class="user number">
				<view class="text">电话</view>
				<input type="text" v-model="cartStore.newSite.tel" />
			</view>
			<view class="user site">
				<view class="text">地区</view>
				<picker mode="region" @change="selectRegion">
					<view>{{region.join(' ') || '选择省 / 市 / 区'}}</view>
				</picker>
			</view>
			<view class="user detail-site">
				<view class="text">详细地址</view>
				<input type="text" v-model="cartStore.newSite.addressDetail" />
			</view>
			<view class="user code">
				<view class="text">邮政编码</view>
				<input type="text" v-model="cartStore.newSite.postalCode" />
			</view>
			<view class="user isdefault">
				<view class="text">设为默认收货地址</view>
				<switch @change="selectSwitch" :checked="switchData" />
			</view>
		</view>

		<view class="final">
			<view class="keep" @click="keep">保存</view>
			<view class="del" v-if="!cartStore.statu" @click="cartStore.delSiteData">删除</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useCartStore,
		useLoginStore
	} from '../../stores/store.js';

	const cartStore = useCartStore()
	const loginStore = useLoginStore()
	
	const region = ref([]) 
	const switchData = ref()
	
	onLoad((options) => {
		if (!loginStore.Token) {
			uni.showToast({
				title: '请先登录',
				icon: 'error'
			})
			loginStore.goLogin()
		}
		cartStore.statu = options.id == 0
		cartStore.id = options.id
		uni.setNavigationBarTitle({ title: options.title });
		if(!cartStore.statu) {
			cartStore.newSite = cartStore.siteData.filter(item => item.id == cartStore.id)[0]
			region.value = [cartStore.newSite.province, cartStore.newSite.city, cartStore.newSite.county]
			switchData.value = cartStore.newSite.isDefault
		}
	})
	
	// 选择地区
	const selectRegion = (e) => {
		region.value = e.detail.value
		cartStore.newSite.province = region.value[0]
		cartStore.newSite.city = region.value[1]
		cartStore.newSite.county = region.value[2]
		cartStore.newSite.areaCode = e.detail.code.join('-')
	}
	
	// 选择默认
	const selectSwitch = (e) => {
		cartStore.newSite.isDefault = e.detail.value
	}

	// 返回
	const goBack = () => {
		uni.navigateBack()
		cartStore.clearSite()
	}
	
	// 保存
	const keep = () => {
		if(cartStore.statu){
			cartStore.keep()
		}else {
			cartStore.put()
		}
		
		region.value = []
		switchData.value = false
	}

	
</script>

<style lang="scss" scoped>
	.addsite-container {
		width: px2rpx(375);

		// navbar
		.header {
			width: px2rpx(375);
			height: px2rpx(50);
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ccc;

			image {
				width: px2rpx(16);
				height: px2rpx(16);
				margin: 0 px2rpx(20);
			}

			.title {
				font-size: px2rpx(14);
				margin-left: px2rpx(110);
			}
		}

		// 用户信息表
		.userinfo {
			margin-top: px2rpx(10);
			width: px2rpx(375);
			font-size: px2rpx(14);
			display: flex;
			flex-direction: column;
			align-items: center;

			.user {
				height: px2rpx(44);
				width: px2rpx(335);
				border-bottom: 1px solid #ccc;
				justify-content: space-between;
				display: flex;
				align-items: center;

				.text {
					color: #646566;
				}

				input {
					margin-right: px2rpx(20);
					font-size: px2rpx(14);
					width: px2rpx(240);
				}

				switch {
					transform: scale(0.8);
				}
				
				picker {
					margin-right: px2rpx(125);
				}
			}
		}

		.final {
			margin-top: px2rpx(20);
			width: px2rpx(375);
			display: flex;
			align-items: center;
			flex-direction: column;

			.keep {
				margin-top: px2rpx(10);
				width: px2rpx(345);
				height: px2rpx(44);
				border-radius: px2rpx(22);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				background-color: #ee0a24;
			}

			.del {
				margin-top: px2rpx(10);
				width: px2rpx(345);
				height: px2rpx(44);
				border-radius: px2rpx(22);
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #ccc;
			}


		}
	}
</style>